#include ("/_includes/_layout.html")
#define css()
<style type="text/css">
.global-themes {
    margin-top: 5px;
    margin-left: -3px;
    width: 370px;
}
.clearfix {
    zoom: 1;
}
.global-themes .theme-item {
    float: left;
    /* padding: 2px; */
    margin: 0 20px 5px 0;
    height: 16px;
    border: 1px solid #fff;
    cursor: pointer;
}
.global-themes .theme-item.active {
    border: 1px solid #0080f9;
}
.global-themes .theme-item .color-item {
    display: inline-block;
    width: 16px;
    height: 16px;
}
img {
    width: auto\9;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
    border: 0;
    -ms-interpolation-mode: bicubic;
    position: relative;
}
.example-imgs {
    width: calc(100% - 130px);
    margin-top: 5px;
}
</style>
#end
#@layout("配色风格", "wxmall,点步科技", "Wxmall社区","wxmall") 
#define content()
<div class="wrapper wrapper-content">
		<div class="ibox-content">
		    <div class="row">
				<form data-reactroot="" class="form-horizontal">
					<div class="form-group">
						<label class="col-md-2 control-label">选择配色方案：</label>
						<div class="col-md-8">
							<div class="global-themes clearfix">
								<div class="theme-item" index="1">
									<span class="color-item" style="background: rgb(255, 68, 68);"></span>
									<span class="color-item" style="background: rgb(255, 136, 85);"></span>
									<span class="color-item" style="background: rgb(255, 255, 255); height: 14px; width: 14px; border: 1px solid rgb(234, 234, 234);"></span>
								</div>
								<div class="theme-item" index="2">
									<span class="color-item" style="background: rgb(255, 94, 21);"></span>
									<span class="color-item" style="background: rgb(255, 147, 0);"></span>
									<span class="color-item" style="background: rgb(255, 255, 255); height: 14px; width: 14px; border: 1px solid rgb(234, 234, 234);"></span>
								</div>
								<div class="theme-item" index="3">
									<span class="color-item" style="background: rgb(255, 84, 123);"></span>
									<span class="color-item" style="background: rgb(255, 230, 232);"></span>
									<span class="color-item" style="background: rgb(255, 255, 255); height: 14px; width: 14px; border: 1px solid rgb(234, 234, 234);"></span>
								</div>
								<div class="theme-item" index="4">
									<span class="color-item" style="background: rgb(255, 68, 68);"></span>
									<span class="color-item" style="background: rgb(85, 85, 85);"></span>
									<span class="color-item" style="background: rgb(255, 255, 255); height: 14px; width: 14px; border: 1px solid rgb(234, 234, 234);"></span>
								</div>
								<div class="theme-item" index="5">
									<span class="color-item" style="background: rgb(252, 198, 0);"></span>
									<span class="color-item" style="background: rgb(29, 38, 46);"></span>
									<span class="color-item" style="background: rgb(255, 255, 255); height: 14px; width: 14px; border: 1px solid rgb(234, 234, 234);"></span>
								</div>
								<div class="theme-item" index="6">
									<span class="color-item" style="background: rgb(101, 196, 170);"></span>
									<span class="color-item" style="background: rgb(221, 242, 236);"></span>
									<span class="color-item" style="background: rgb(255, 255, 255); height: 14px; width: 14px; border: 1px solid rgb(234, 234, 234);"></span>
								</div>
								<div class="theme-item active" index="7">
									<span class="color-item" style="background: rgb(9, 187, 7);"></span>
									<span class="color-item" style="background: rgb(56, 56, 56);"></span>
									<span class="color-item" style="background: rgb(255, 255, 255); height: 14px; width: 14px; border: 1px solid rgb(234, 234, 234);"></span>
								</div>
								<div class="theme-item" index="8">
									<span class="color-item" style="background: rgb(99, 190, 114);"></span>
									<span class="color-item" style="background: rgb(225, 244, 227);"></span>
									<span class="color-item" style="background: rgb(255, 255, 255); height: 14px; width: 14px; border: 1px solid rgb(234, 234, 234);"></span>
								</div>
								<div class="theme-item" index="9">
									<span class="color-item" style="background: rgb(74, 144, 226);"></span>
									<span class="color-item" style="background: rgb(219, 233, 249);"></span>
									<span class="color-item" style="background: rgb(255, 255, 255); height: 14px; width: 14px; border: 1px solid rgb(234, 234, 234);"></span>
								</div>
								<div class="theme-item" index="10">
									<span class="color-item" style="background: rgb(195, 167, 105);"></span>
									<span class="color-item" style="background: rgb(243, 238, 225);"></span>
									<span class="color-item" style="background: rgb(255, 255, 255); height: 14px; width: 14px; border: 1px solid rgb(234, 234, 234);"></span>
								</div>
								<div class="theme-item" index="11-1">
									<span class="color-item" style="background: rgb(51, 51, 51);"></span>
									<span class="color-item" style="background: rgb(255, 255, 255); height: 14px; width: 14px; border: 1px solid rgb(234, 234, 234);"></span>
									<span class="color-item" style="background: rgb(255, 255, 255); height: 14px; width: 14px; border: 1px solid rgb(234, 234, 234);"></span>
								</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-2 control-label">当前风格示例：</label>
						<div class="col-md-8">
							<img src="#(webctx)/resources/assets/img/7.png" alt="example" id="example_img"/>
						</div>
					</div>
					<div class="panel-default">
					  	<div class="panel-body" align="center">
							<button type="submit" class="btn btn-success btn-sm">保存</button>
					  	</div>
				  	</div>
				</form>
		   	</div>   
	  	</div>
</div>
#end
<script type="text/javascript">
$(".theme-item").click(function(){
	$(".theme-item").each(function(){
		$(this).removeClass("active");
	})
	$(this).addClass("active");
	var c = $(this).attr("index");
	$("#example_img").attr("src", "#(webctx)/resources/assets/img/"+c+".png");
});
</script>